<template>
  <div class="review-form">
    <h3 class="form-title">Write a Review</h3>
    <textarea
      v-model="reviewText"
      placeholder="Share your thoughts about this movie..."
      maxlength="500"
      class="review-textarea"
    ></textarea>
    <div class="character-count">{{ reviewText.length }}/500</div>
    <div class="rating-container">
      <label for="rating">Rating:</label>
      <select v-model="rating" required name="rating" class="rating-select">
        <option value="" disabled selected>Select a rating</option>
        <option
          v-for="i in maximumRating"
          :key="i"
          :value="i"
        >{{ i }}</option>
      </select>
    </div>
    <button class="submit-button" @click="submitReview">
      Submit Review
    </button>
  </div>
</template>

<script lang="ts">
import type {Review} from '@/utility/interfaces';
import {submitReview} from '@/utility/untility functions';
import request from "@/axios/request";

export default {
  props: ["movie_id"],
  data() {
    return {
      reviewText: '',
      rating: 0,
      maximumRating: 10,
    };
  },
  methods: {
    // 提交评分
    submitScore() {
      console.log('提交评分');
      request.post('/movie/score', {
        movie_id: this.movie_id,
        score: this.rating
      }).then(res => {
        if (res.code !== 200) {
          console.log('提交评论失败')
          ElMessage.error('提交评论失败')
        } else {
          console.log('提交评论成功')
        }
      })
    },

    // 提交评论
    async submitReview() {
      if (!this.reviewText || !this.rating) {
        alert('Please fill out all fields.');
        return;
      }
      const newReview = {
        movie_id: this.movie_id,
        content: this.reviewText
      };
      console.log('New review:', newReview);
      await submitReview(newReview);
      await this.submitScore();
      this.$emit('submit-review', newReview);

      this.reviewText = ''; // Reset fields
      this.rating = 0;
    },
  },
};
</script>

<style scoped>
.review-form {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.form-title {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.review-textarea {
  width: 100%;
  min-height: 120px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  resize: vertical;
  transition: all 0.3s ease;
  padding: 1rem;
  box-sizing: border-box;
}

.review-textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.review-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.character-count {
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.rating-container {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rating-container label {
  color: #fff;
  font-size: 1rem;
}

.rating-select {
  padding: 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rating-select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.rating-select option {
  background: #2c2c2c;
  color: #fff;
}

.submit-button {
  width: 100%;
  padding: 0.8rem;
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-button:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.submit-button:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .review-form {
    padding: 1rem;
  }

  .rating-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .rating-select {
    width: 100%;
  }
}
</style>
